<template>
    <div class="none" v-if="consultation.length==0">
      暂无咨询记录
    </div>
  <div class="root" v-else>
    <!-- 展示咨询过的医生 -->
     <div class="card"  v-for="(item,index) in consultation" :key=index>
      <el-card style="width: 400px;" class="el-card">
        <el-button type="success" size="small" class="btn" @click="GoDoc(item.doctorId)">查看聊天记录</el-button>
        <div class="doc">
          <img :src="getUrl(item.avatar)" style="margin-top: 8px;">
          <div class="font">
            <div class="detail">
              <span class="reservation-doc">{{ item.name}}</span>
            </div>
            <span class="reservation-dep">{{item.hospitalName+'  '+item.departmentName}}</span>
          </div>
        </div>
      </el-card>
     </div>
  </div>
</template>

<script setup>
import { onMounted,ref } from 'vue';
import { reqGetConsultation} from '@/api/chat';
// import queryString from 'query-string';
import { useRouter } from 'vue-router';

const $router=useRouter()

// 存储咨询过的医生
const consultation=ref([])
onMounted(async ()=>{
  let res=await reqGetConsultation(localStorage.getItem('UID'))
  // let res=await reqGetConsultation(2)
  console.log(res)
  if(res.data.code==1){
    consultation.value=res.data.data
  }
})

// 获取图片真实地址
const getUrl=(url)=>{
  return url
  // // 分割为基础url和查询参数
  // const parsed = queryString.parseUrl(url);

  // // 提取 mediaurl 参数的值
  // const mediaUrlEncoded = parsed.query.riu;

  // // 解码 mediaurl 参数的值
  // const realImageUrl = decodeURIComponent(mediaUrlEncoded);
  // return realImageUrl
}

// 跳转咨询界面
const GoDoc=(did)=>{
  $router.push({
    path:'/chatdoc',
    query:{
      did,
    }
  })
}
</script>

<style lang="scss" scoped>
.none{
  font-size: 36px;
  margin-top: 20px;
  text-align: center;
  color: #bbb;
}
.root{
  // width: 1920px;
  min-width: 1810px;
  height: 1080px;
  display: grid;
  grid-template-columns: 600px 600px 600px;
  grid-template-rows: 230px 230px 230px;

  .card{
    width: 600px;
    margin-left: 40px;
    margin-top: 40px;
    margin-bottom: 40px;
    background-color: #f2f2f2;
    position: relative;
    .btn{
      position: absolute;
      left:295px;
      top:3px
    }
    .el-card{
      .doc{
      display: flex;
      img{
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }
      .font{
        margin-top: 20px;
        margin-left: 10px;
        font-size: 18px;
      }
      }
    }
  }
}
</style>
